<template>
    <!-- <div class="overview">
    </div> -->
    <!-- <Teleport to="body">
        <div class="overview-content" v-if="true"></div>
    </Teleport> -->
    <div class = "box">
        <img
        @click="showOverview"
        src="/src/assets/uiResources/sub.png"
        data-original="/src/assets/uiResources/sub.png"
        alt=""
        style="width: 500px; height: 220px"
        id="imgTools"
    />
    </div>
</template>

<script setup>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import { nextTick, onMounted } from "vue";
let viewer;
const showOverview = () => {
    viewer.show();
};
let pUrl = new URL("/src/assets/uiResources/sub.png",import.meta.url).href;
onMounted(() => {
    nextTick(() => {
        viewer = new Viewer(document.getElementById("imgTools"), {
            inline: false,
            navbar: false,
            toolbar: false,
            url: () => pUrl,
            viewed() {
                viewer.zoomTo(0.1);
            },
        });
    });
});
</script>

<style scoped>
.overview {
    position: relative;
    height: 100%;
    background-image: url("@/assets/uiResources/sub.png");
    background-size: cover;
    background-position: center center;
}
.overview-content {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: url("@/assets/uiResources/sub.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.8;
}

.box {
    width: 100%;
}
#imgTools {
    object-fit: cover;
}
</style>
<!-- 线路概览
<template>
    <img src="/src/assets/uiResources/sub.png" alt="" style="width: 448px; height: 200px" id="imgTools"/>
  </template>
  
  <script setup>
  import Viewer from "viewerjs";
  import { nextTick, onMounted } from "vue";
  
  onMounted(() => {
    // nextTick(() => {
    //   const viewer = new Viewer(document.getElementById("imgTools"), {
    //     inline: true,
    //     navbar:false,
    //     toolbar:false,
    //     viewed() {
    //       viewer.zoomTo(0.1);
    //     },
    //   });
    // });
  });
  </script>
  <style>
  #image {
    width: 200px;
  }
  </style> -->
